<template>
  <div id="forget-password">
    <h1 class="header">忘记密码</h1>
    <a-form :model="form" @submit="save($event)" autocomplete="off">
      <a-form-item
        name="emailAddress"
        :rules="[{ required: true, message: l('ThisFieldIsRequired') }]"
      >
        <a-input
          name="emailAddress"
          v-model:value="form.emailAddress"
          :placeholder="l('EmailAddress')"
          autoFocus
          required
          maxlength="255"
          type="email"
          email
        >
          <template #prefix>
            <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
          </template>
        </a-input>
      </a-form-item>
      <!-- 验证码 -->
      <a-form-item v-if="useCaptcha" name="verificationCode">
        <captcha
          v-model:value="form.verificationCode"
          ref="captcha"
          :placeholder="l('CAPTCHA')"
          :primaryKey="primaryKey"
          :type="captchaType"
          @update:modelValue="getChange($event)"
        />
      </a-form-item>
      <a-form-item>
        <a-button block type="primary" html-type="submit">
          {{ l('Submit') }}
        </a-button>
      </a-form-item>
      <div style="float: right">
        <router-link to="/account/login">{{ l('Back') }}</router-link>
      </div>
    </a-form>
  </div>
</template>
<script lang="ts">
  import { AccountServiceProxy, SendPasswordResetCodeInput } from '/@/shared/service-proxies';
  import { AppComponentBase } from '/@/shared/component-base';
  import { Captcha } from '../components';
  import { abpService, appSessionService } from '/@/shared/abp';
  import { UserOutlined } from '@ant-design/icons-vue';
  import { defineComponent } from 'vue';
  import { AppConsts } from '/@/abpPro/AppConsts';

  function hasErrors(fieldsError) {
    return Object.keys(fieldsError).some((field) => fieldsError[field]);
  }

  export default defineComponent({
    name: 'ForgotPassword',
    components: {
      Captcha,
      UserOutlined,
    },
    mixins: [AppComponentBase],
    data() {
      return {
        hasErrors,
        isSubmitting: false, // 提交中
        tmpPrimaryKey: undefined,
        verificationImgUrl: undefined, // 验证码地址
        form: {
          emailAddress: '',
          verificationCode: '',
        },
        SessionLink: '',
        accountServiceProxy: new AccountServiceProxy(),
        sendPasswordResetCodeInput: new SendPasswordResetCodeInput(),
        // model: new SendPasswordResetCodeInput(),
        saving: false,
        captchaTimestamp: 0,
      };
    },
    computed: {
      /** 是否使用登陆验证码 */
      primaryKey() {
        // 验证码主键
        return this.form.emailAddress;
      },
      captchaType() {
        // 验证码类型
        if (appSessionService.tenantId) {
          return AppConsts.settings.SharedSettings.UseCaptchaOnUserForgotPassword;
        } else {
          return AppConsts.settings.SharedSettings.UseCaptchaOnUserForgotPassword;
        }
      },
      useCaptcha() {
        return abpService.abp.setting.getBoolean(
          AppConsts.settings.SharedSettings.UseCaptchaOnUserForgotPassword,
        );
      },
    },
    mounted() {
      this.SessionLink =
        AppConsts.appBaseUrl + '/account/reset-password?userId={userId}&resetCode={resetCode}';
      if (appSessionService.tenantId) {
        this.SessionLink =
          AppConsts.appBaseUrl +
          '/account/reset-password?userId={userId}&resetCode={resetCode}&tenantId={tenantId}';
      }
    },
    methods: {
      getChange(val) {
        this.form.verificationCode = val;
      },
      save(e) {
        e.preventDefault();
        this.saving = true;

        this.sendPasswordResetCodeInput = SendPasswordResetCodeInput.fromJS(this.form);
        this.sendPasswordResetCodeInput.link = this.SessionLink;
        this.accountServiceProxy
          .sendPasswordResetCode(this.sendPasswordResetCodeInput)
          .then(() => {
            this.message
              .success(this.l('PasswordResetMailSentMessage'), this.l('MailSent'))
              .done(() => {
                this.$router.push('account/login');
              });
          })
          .finally(() => {
            this.saving = false;
            this.updateCaptchaTimestamp();
          });
      },
      Backlogin() {
        this.$router.push('/account/login');
      },
      /** 更新验证码时间戳 */
      updateCaptchaTimestamp() {
        this.captchaTimestamp = new Date().getTime();
      },
    },
  });
</script>
<style lang="less" scoped>
  #forget-password {
    box-shadow: 0px 0px 48px rgba(0, 158, 247, 0.11);
    padding: 40px;

    .header {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 30px;
    }
  }
</style>
